<template>
  <a-modal
    title="分配申报组织"
    :width="600"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout" >
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['expertGroupId', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-form-item label="当前体系">
          {{ systemDetail?.name }}
        </a-form-item>
        <a-form-item label="申报组织">
          <a-select
            mode="multiple"
            showArrow
            placeholder="请选择申报组织"
            optionFilterProp="title"
            v-decorator="[
              'declarationInfoIds',
              {rules: [{ required: false, message: '请选择申报组织'}]}
            ]" >
            <a-select-option v-for="item in orgList" :key="item.id" :value="item.id" :title="item.createUserName">{{ item.createUserName }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 选择指标 -->
        <a-form-item label="选择指标">
          <!-- 类别 -->
          <div class="index-box">
            <div class="cate-lists">
              <div class="list-title">申报类型</div>
              <div v-for="(item, index) in categoryList" :key="index" @click="loadIndexList(item.id)" class="comm-item" :class="{act: typeId == item.id}">
                <!-- <div v-if="typeHas(item.id)" class="has"></div> -->
                {{ item.type || '--' }}
              </div>
            </div>
            <!-- 指标 -->
            <div v-loading="indexLoading" class="index-lists">
              <div class="list-title">
                <div>指标列表 ({{ targetIds.length || 0 }})</div>
                <div @click="targetIds = []" class="reset">清空选项</div>
              </div>
              <a-spin :spinning="indexLoading"></a-spin>
              <div v-for="(item, index) in indexList" :key="index" @click="chooseIndex(item.id)" class="comm-item" :class="{act: targetIds.includes(item.id)}">
                {{ item.target || '--' }}
              </div>
            </div>
          </div>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'

// 表单字段
const fields = ['expertGroupId', 'declarationInfoIds']
import { indexCategoryList, indexListByCate } from '@/api/system'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    orgList: {
      type: Array,
      default: () => []
    },
    systemDetail: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    }
    return {
      form: this.$form.createForm(this),
      indexLoading: true,
      typeId: '',
      firstTypeId: '',
      categoryList: [],
      indexList: [],
      targetIds: []
    }
  },
  created () {
    console.log('custom modal created')

    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  mounted() {
    this.loacCategoryList()
  },
  methods: {
    // 选择指标
    chooseIndex (indexId) {
      let index = this.targetIds.findIndex(v => v == indexId)
      if (index != -1) {
        this.targetIds.splice(index, 1)
      } else {
        this.targetIds.push(indexId)
      }
    },
    // 是否有选择当前的类型
    typeHas(typeId) {
    },
    //  初始化申报类别
    initTypeList() {
      this.loadIndexList(this.firstTypeId)
    },
    // 加载类别
    loacCategoryList() {
      indexCategoryList().then(data => {
        this.categoryList = data || []
        if (this.categoryList.length > 0) {
          this.firstTypeId = this.categoryList[0].id
          this.loadIndexList(this.firstTypeId)
        }
      })
    },
    // 加载指标
    loadIndexList(typeId) {
      this.typeId = typeId
      this.indexLoading = true
      let params = {
        parentId: 0,
        socialOrganizationTypeId: typeId
      }
      indexListByCate(params).then(data => {
        this.indexList = data || []
      }).finally(e => {
        this.indexLoading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.index-box {
  width: 100%;
  height: 350px;
  border: 1px solid #e8e8e8;
  display: flex;
  line-height: normal;
  .cate-lists {
    width: 200px;
    border-right: 1px solid #e8e8e8;
    padding: 10px 10px;
    overflow: auto;
  }
  .index-lists {
    flex: 1;
    padding: 10px 10px;
    position: relative;
    overflow: auto;
    .ant-spin-spinning {
      width: 85%;
      height: 80%;
      overflow: hidden;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }
  }
  .list-title {
    padding-bottom: 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    .reset {
      cursor: pointer;
    }
  }
  .comm-item {
    padding: 5px 10px;
    background-color: #efefef;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .comm-item.act {
    color: #fff;
    background-color: #1890ff;
  }
  // .comm-item .has {
  //   width: 5px;
  //   height: 5px;
  //   background-color: red;
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  // }
}
</style>
